<template>
  <div class="home">
    <div class="top">
      <div class="top_left">
        <OrderTotal :taskReportInfoList="taskReportInfoList" :saleTotalList="saleTotalList" />
        <SaleEchart :amountCollect="amountCollect" :regionCollect="regionCollect" />
      </div>
      <Ranking :skuTopList="skuTopList" />
    </div>
    <div class="bottom">
      <PointEcharts />
      <ErrorData />
    </div>
  </div>
</template>

<script>
import OrderTotal from './components/OrderTotal.vue'
import Ranking from './components/Ranking.vue'
import SaleEchart from './components/SaleEchart.vue'
import PointEcharts from './components/PointEcharts.vue'
import ErrorData from './components/ErrorData.vue'
import { skuTopAPI, taskReportInfoAPI, orderCountAPI, orderAmountAPI } from '@/api'
import { getCurrentDay, getMonth } from '@/plugins/formatDate.js'
export default {
  name: 'Home',
  components: {
    OrderTotal,
    Ranking,
    SaleEchart,
    PointEcharts,
    ErrorData
  },
  data() {
    return {
      // 时间
      timeInfo: {
        start: getMonth(),
        end: getCurrentDay()
      },
      // 获取销售前几的商品
      skuTopInfo: {
        topNum: 10
      },
      // 获取当时工单汇总信息
      taskReportInfo: {
        start: `${getMonth()} 00:00:00`,
        end: `${getCurrentDay()} 23:59:59`
      },
      // 当时工单汇总信息接收得到的数据
      taskReportInfoList: [],
      // 销售统计
      saleTotalList: [],
      // 获取销售前几的商品
      skuTopList: [],
      // 获取销售额统计
      amountCollect: {},
      // 获取地区汇总销售额数据
      regionCollect: {}
    }
  },
  created() {
    // 获取销售额统计 && 根据地区汇总销售额数据(销售量分布)
    this.getCollectData()
  },
  methods: {
    async getCollectData() {
      try {
        // 获取销售前几的商品
        const res3 = await skuTopAPI({ ...this.skuTopInfo, ...this.timeInfo })
        this.skuTopList = res3.data.sort((a, b) => b.count - a.count) // 完成
        // 获取当时工单汇总信息
        const res4 = await taskReportInfoAPI(this.taskReportInfo)
        this.taskReportInfoList = res4.data // 完成
        // 销售统计的两个接口
        // 获取一定时间范围之内的订单总数
        const res5 = await orderCountAPI(this.taskReportInfo)
        this.saleTotalList.push(res5.data) // 完成
        // 获取一定时间范围之内的收入
        const res6 = await orderAmountAPI(this.taskReportInfo)
        this.saleTotalList.push(res6.data) // 完成
      } catch (error) {
        return Promise.reject(error)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.top {
  display: flex;
  .top_left {
    flex: 1;
    height: 540px;
  }
}
.bottom {
  display: flex;
  margin-top: 20px;
}
</style>
